<template>
	<view class="detail-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="订单详情" backgroundColor="#EE3B3B" fontColor="#fff" />
		<view class="detail-bg" :style="{top: paddingTop + 'px'}"></view>
		<view class="detail-content">
			<view class="detail-status-wrapper">
				<view class="">
					<view class="status">
						<image v-if="detailInfo.orderState == -1||detailInfo.orderState == 8" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status5.png">
						</image>
						<image v-if="detailInfo.orderState == 6" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status6.png">
						</image>
						<image v-if="detailInfo.orderState == 5" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status3.png">
						</image>
						<image v-if="detailInfo.orderState == 4" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status8.png">
						</image>
						<!-- 车队用户登录，订单状态则是待审核，其它用户是待付款 -->
						<image v-if="detailInfo.orderState == 1" class="icon"
							:src="
							getUserInfo.fleetFlag ?
							'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status9.png'
							: 
							'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status1.png'
							">
						</image>
						<image v-if="detailInfo.orderState == 7" class="icon"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status7.png">
						</image>
						<text class="status-name"
							v-if="detailInfo.orderState == -1||detailInfo.orderState == 8">已取消</text>
						<text class="status-name" v-if="detailInfo.orderState == 6">已完成</text>
						<text class="status-name" v-if="detailInfo.orderState == 5">服务中</text>
						<text class="status-name" v-if="detailInfo.orderState == 4">待使用</text>
						<!-- 车队用户登录，订单状态则是待审核，其它用户是待付款 -->
						<text class="status-name" v-if="detailInfo.orderState == 1">
							{{ getUserInfo.fleetFlag ? '待审核' : '待付款'}}
						</text>
						<text class="status-name" v-if="detailInfo.orderState == 7">待使用-退款中</text>
					</view>
					<view class="warning" v-if="detailInfo.orderState == -1">
						{{ detailInfo.cancelReason }}
					</view>
					<view class="warning" v-if="detailInfo.orderState == 8">取消原因：已申请退款</view>
					<view class="warning" v-if="detailInfo.orderState == 1">
						<!-- 车队用户登录，订单状态则是待审核，其它用户是待付款 -->
						<view v-if="getUserInfo.fleetFlag">
							待车队审核，加急请联系车队
						</view>
						<view v-else>
							需付款：￥{{ detailInfo.orderPayInfo&&detailInfo.orderPayInfo.totalOnlineMoney?detailInfo.orderPayInfo.totalOnlineMoney.toFixed(2):'0.00' }}
							，剩余：{{lastPayTime}}</view>
						</view>
				</view>
				<view class="kefu" @click="callPhone">
					<u-icon name="kefu-ermai" color="#fff" size="40"></u-icon>
				</view>

			</view>
			<view class="detail-tip" v-if="!getUserInfo.fleetFlag || detailInfo.orderState != 1">
				<view class="tip-icon">
					<image class="img"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/car.png">
					</image>
				</view>
				<view class="tip-title">
					<view class="title" v-if="detailInfo.orderState == 6">您的订单已使用。感谢您选择卡友之家，欢迎您再次光临。</view>
					<view class="title" v-if="detailInfo.orderState == 8 || detailInfo.orderState == -1">
						很遗憾未能为您提供服务，期待您的再次光临</view>
					<view class="title" v-if="detailInfo.orderState == 5">您的订单正在服务中，请耐心等待...</view>
					<view class="title" v-if="detailInfo.orderState == 4">您的订单门店已经受理</view>
					<view class="title" v-if="detailInfo.orderState == 1">等待付款</view>
					<view class="title" v-if="detailInfo.orderState == 7">您的订单正在退款中...</view>
					<!-- <view class="date">{{ detailInfo.updatedTime }}</view> -->
					<view class="date" v-if="detailInfo.orderState == 1 || detailInfo.orderState == 4 || detailInfo.orderState == 7">{{ detailInfo.createdTime }}</view>
					<view class="date" v-if="detailInfo.orderState == 5 || detailInfo.orderState == -1">{{ detailInfo.updatedTime }}</view>
					<view class="date" v-if="detailInfo.orderState == 6">{{ detailInfo.completeTime ? formatDate(detailInfo.completeTime) : ' '}}</view>
					<view class="qr" v-if="detailInfo.orderState == 4||detailInfo.orderState == 7">
						<image class="code-img"
							:src="baseUrl+'/user-center/qr-code/generate?content='+detailInfo.orderIdentifyNo+'&width=200'"
							v-if="detailInfo.orderState == 4||detailInfo.orderState == 7">
					</view>

					</image>
					<view class="code" v-if="detailInfo.orderState == 4||detailInfo.orderState == 7">
						{{ detailInfo.orderIdentifyNo }}</view>
					<view class="tip" v-if="detailInfo.orderState == 4||detailInfo.orderState == 7">请主动告知门店您购买的服务项目后验码使用
					</view>
				</view>
			</view>
			
			<!-- 地址 ----- 车队用户登录，订单状态则是待审核，其它用户是待付款 -->
			<view class="detail-tip" v-if="detailInfo.orderState == 1 && detailInfo.orderAddress" style="margin-top: 20rpx;">
				<view class="tip-icon tip-icon-dingwei">
					<image class="img"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/ic_dingwei.png">
					</image>
				</view>
				<view class="tip-title">
					<view class="title">
						<text style="margin-right: 24rpx;">{{ detailInfo.orderAddress.name || ''}}</text>
						<!-- {{ detailInfo.orderAddress.phone ? detailInfo.orderAddress.phone.replace(detailInfo.orderAddress.phone.substring(4, 9), '****') : '' }} -->
						{{ detailInfo.orderAddress.phone ? detailInfo.orderAddress.phone.slice(0, 3) + '****' + detailInfo.orderAddress.phone.slice(-4) : '' }}
					</view>
					<view class="date">赠品邮寄地址：{{ detailInfo.orderAddress.province + detailInfo.orderAddress.city + detailInfo.orderAddress.county + detailInfo.orderAddress.addressDetail || ''}}</view>

				</view>
			</view>
			
			<view class="goods-info">
				<view class="store" @click="goStoreDetial(detailInfo.terminalInfo)">
					<view class="store-name">
						<text class="name">{{ detailInfo.terminalName }}</text>
						<u-icon name="arrow-right" size="32"></u-icon>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods-item" v-for="(item, index) in detailInfo.orderItems">
						<view class="goods-img">
							<image class="img"
								:src="item.image?item.image:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_default_square.png'">
							</image>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ item.goodsName }}</view>
							<view class="goods-price">
								<view class="price"><text
										style="font-size: 12px;">￥</text>{{ item.sellPrice.toFixed(2) }}</view>
								<view class="num">×{{ item.quantity }}</view>
							</view>
							<view class="action-btn" v-if="detailInfo.orderState == 6">
								<!-- orderCustomerServiceId 售后单id -->
								<u-button v-if="item.orderCustomerServiceId" type="primary" text="查看售后" size="small" :plain="true" @click.stop="goAfterSaleDetail(item.orderCustomerServiceId)"></u-button>
                <!-- <u-button v-else type="primary" text="申请售后" size="small" :plain="true" @click.stop="goApplyAfterSale(item, index)"></u-button> -->
							</view>
						</view>
					</view>
				</view>
				<view class="store-detail">
					<view class="list">
						<view class="label-name">门店地址：</view>
						<view class="content">{{ detailInfo.terminalName }}</view>
					</view>
					<view class="list">
						<view class="label-name"></view>
						<view class="content">
							<text class="mr adress">{{ detailInfo.terminalInfo.address }}</text>
							<u-icon name="arrow-right" size="32" />
						</view>
					</view>
					<view class="list">
						<view class="label-name"></view>
						<view class="content">
							<view class="dhua" @click="callPhone(detailInfo.terminalInfo)">
								<image class="img"
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_dianhua.png">
								</image>
								<text>电话</text>
							</view>
							<view class="dh" @click="handleDH(detailInfo)">
								<image class="img"
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_daohang.png">
								</image>
								<text>导航</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="list">
					<view class="label-name">订单编号：</view>
					<view class="content" @click="onCopy(detailInfo.orderNo)">{{ detailInfo.orderNo }}
						<image class="img"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/copy.png">
						</image>
					</view>
				</view>
				<view class="list">
					<view class="label-name">下单时间：</view>
					<view class="content">{{ detailInfo.createdTime }}</view>
				</view>
				<view class="list" v-if="detailInfo.orderPayInfo.payType">
					<view class="label-name">支付方式：</view>
					<view class="content" v-if="detailInfo.orderPayInfo.payType == 'score'">积分</view>
					<view class="content" v-if="detailInfo.orderPayInfo.payType == 'wx'">微信</view>
					<view class="content" v-if="detailInfo.orderPayInfo.payType == 'alipay'">支付宝</view>
					<view class="content" v-if="detailInfo.orderPayInfo.payType == 'credit'">信用额度支付</view>
				</view>
				<view class="list" v-if="detailInfo.orderPayInfo.payTime">
					<view class="label-name">支付时间：</view>
					<view class="content">{{ detailInfo.orderPayInfo.payTime }}</view>
				</view>
				<view class="list">
					<view class="label-name"></view>
					<view class="content hr"></view>
				</view>
				<view class="list">
					<view class="label-name">商品合计：</view>
					<view class="content fe">￥{{ detailInfo.originalPrice?detailInfo.originalPrice.toFixed(2):'0.00' }}
					</view>
				</view>
				<view class="list">
					<view class="label-name">会员折扣：</view>
					<view class="content fe">-￥{{ detailInfo.vipDiscount?detailInfo.vipDiscount.toFixed(2):'0.00' }}
					</view>
				</view>
				<view class="list">
					<view class="label-name">优惠卷抵扣：</view>
					<view class="content fe">-￥{{ detailInfo.couponsMoney?detailInfo.couponsMoney.toFixed(2):'0.00'}}
					</view>
				</view>
				<view class="list">
					<view class="label-name">积分抵扣：</view>
					<view class="content fe">-￥{{ detailInfo.scoreMoney?detailInfo.scoreMoney.toFixed(2):'0.00' }}
					</view>
				</view>
				<view class="list">
					<view class="label-name"></view>
					<view class="content fe">实付金额：<text class="acount"> <text
								style="font-size: 12px;">￥</text>{{ detailInfo.orderPayInfo&&detailInfo.orderPayInfo.totalOnlineMoney?detailInfo.orderPayInfo.totalOnlineMoney.toFixed(2):'0.00' }}</text>
					</view>
				</view>
				<view class="list" v-if="detailInfo.orderState == 8 ||detailInfo.orderState == 4">
					<view class="label-name"></view>
					<view class="content fe">
						<view style="width:100%"></view>
						<!-- <u-button type="primary" text="退款进度" :plain="true" size="small" v-if="detailInfo.orderState == 8" @click="afterSaleDetail"></u-button> -->
						<!-- <u-button type="primary" text="分享核销码" :plain="true" size="small" v-if="detailInfo.orderState == 4"></u-button> -->
					</view>
				</view>
			</view>
			<!-- 车队用户登录，订单状态则是待审核，其它用户是待付款 -->
			<view class="oprate-btn" v-if="!getUserInfo.fleetFlag || detailInfo.orderState !== 1">
				<u-button type="primary" text="退款进度" v-if="detailInfo.orderState == 8" @click="afterSaleDetail"></u-button>
				<u-button type="primary" text="退款中" v-if="detailInfo.orderState == 7" @click="goRefundDetail"></u-button>
				<u-button type="primary" text="申请退款" v-if="detailInfo.orderState == 4" @click="goApplyRefound"></u-button>
				<u-button type="primary" text="查看发票"  @click.native.stop="toInvoiceDetails"
					v-if="(detailInfo.orderState == 4||detailInfo.orderState == 6||detailInfo.orderState == 5||detailInfo.orderState == 7)&&detailInfo.invoiceId"></u-button>
				<u-button type="primary" text="分享核销码"
					v-if="detailInfo.orderState == 4||detailInfo.orderState == 7" @click="showCode(detailInfo)">
				</u-button>
				<u-button type="primary" text="去支付" v-if="detailInfo.orderState == 1" @click="onPay(detailInfo)">
				</u-button>
				<u-button type="primary" text="去门店" v-if="detailInfo.orderState == 7 ||detailInfo.orderState == 4"
					@click="handleDH(detailInfo)">
				</u-button>
				<u-button type="primary" text="再次购买"
					v-if="detailInfo.orderState == 8 || detailInfo.orderState == -1 ||detailInfo.orderState == 6||detailInfo.orderState == 5"
					@click="goGoodsDetail(detailInfo.orderItems[0].goodsCode)"></u-button>

			</view>
		</view>
		<!-- 分享组件 -->
		<share :isOpen="show" @cancel="show=false" :orderNo="currentOrder.orderNo" :url="baseUrl1"></share>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		baseUrl
	} from '@/common/config'
	import navBar from '@/components/navBar.vue'
	import share from '@/components/share.vue'
	export default {
		components: {
			navBar,
			share
		},
		data() {
			return {
				detailInfo: {},
				baseUrl: baseUrl,
				lastPayTime: '0分0秒',
				timer: '',
				paddingTop: '',
				show: false,
				currentOrder: '',
				orderId: '',
			}
		},
		computed: {
			...mapState('global', ['showInfo']),
			...mapGetters('user', ['getUserInfo']),
			formatDate(){
				return (template) => {
					let date = new Date(template);
					let Year = date.getFullYear();
					let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
					let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
					let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
					let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
					let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
					return GMT
				}
			}
		},
		methods: {
			...mapMutations('global', ['setShowInfo']),
			
			// 申请售后
			goApplyAfterSale(item, index){
				uni.setStorageSync('items', this.detailInfo.orderItems)
				uni.navigateTo({
					url: `/orderPack/applyActions/afterSale?index=${index}&userName=${this.detailInfo.userName}&userPhone=${this.detailInfo.userPhone}`
				})
			},
			// 查看售后
			goAfterSaleDetail(id){
				uni.navigateTo({
					url: `/orderPack/aftermarket/afterSaleDetail?id=${id}`
				})
			},
			// 退款中
			goRefundDetail(){
				uni.navigateTo({
					url: `/orderPack/aftermarket/refundDetail?id=${this.detailInfo.refundOrderId}`
				})
			},
			// 申请退款
			goApplyRefound() {
				// suitOrderFlag 套装商品订单标记，1=普通商品订单，2=套装商品订单
				uni.navigateTo({
					url: `/orderPack/applyActions/refound?orderId=${this.orderId}&suitOrderFlag=${this.detailInfo.suitOrderFlag}`
				})
			},
			async getDetailInfo(val) {
				uni.showLoading({
					title: '加载中...'
				})
				this.orderId = val.data.id
				try {
					const res = await this.$request({
						method: 'get',
						url: '/order-center/car-owner-order/getOrderDetail',
						data: {
							orderId: val.data.id
						}
					})
					this.detailInfo = res.datas
					this.computedLastPayTime()
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}

				uni.stopPullDownRefresh();
			},
			//获取支付剩余时间
			computedLastPayTime() {
				let self = this;
				this.timer = null
				if (self.detailInfo.orderPayInfo && self.detailInfo.orderPayInfo.payExpireTime) {
					this.timer = setInterval(function() {
						let endTime = self.detailInfo.orderPayInfo.payExpireTime / 1000;
						let clientTime = Date.parse(new Date()) / 1000;
						let lastTime = endTime - clientTime;
						let int_minute;
						if (lastTime > 0) {
							int_minute = Math.floor(lastTime / 60);
							lastTime -= int_minute * 60;
							self.lastPayTime = '0 时' + int_minute + ' 分'
						} else {
							self.timer = null
							clearInterval(self.timer)
						}
					}, 1000);
				}
			},
			//再次购买进入商品详情页面
			goGoodsDetail(code) {
				uni.navigateTo({
					url: `/components/goodsDetail?jfcode=${code}`
				});
			},
			//去支付
			onPay(val) {
				uni.showLoading({
					title: '网络请求中'
				})
				try {
					uni.hideLoading()
					// 跳转拉卡拉支付
					let path = 'payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl='
					path += encodeURIComponent(val.counterUrl)
					uni.navigateToMiniProgram({
						appId: 'wxc3e4d1682da3053c',
						path,
						fail: () => {
							uni.showToast({
								title: '跳转支付失败',
								icon: 'error'
							})
						}
					})
				} catch (err) {
					uni.hideLoading()
					uni.showToast({
						title: '创建订单失败',
						icon: 'error'
					})
				}
			},
			//查看门店详情
			goStoreDetial(item) {
				uni.navigateTo({
					url: `/storePack/detail/detail?terminalId=${item.id}&longitude=${item.lng}&latitude=${item.lat}`
				})
			},

			//电话
			callPhone(item) {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: item.phone || '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: item.phone || '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: item.phone || '400-696-5399'
								})
							}
						}
					})
				}
			},
			//去门店
			handleDH(val) {
				const {
					lng,
					lat,
					name,
					address
				} = val.terminalInfo
				uni.openLocation({
					longitude: lng,
					latitude: lat,
					name,
					address,
				});
			},
			//复制
			onCopy(data) {
				uni.setClipboardData({
					data: data, // 复制的内容 
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			showCode(val) {
				this.currentOrder = val
				this.show = true
			},
			// 根据订单id查询订单状态
			async getPayStatus() {
				try {
					const {
						datas
					} = await this.$request({
						url: '/order-center/car-owner-order/pay-success-page',
						data: {
							orderId: this.orderId,
							type: 1
						}
					})
					uni.hideLoading()
					return datas.orderState
				} catch (err) {
					uni.hideLoading()
				}
			},
			// 支付成功
			paySuccess() {
				uni.showToast({
					title: '支付成功!',
					icon: 'success'
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/cartPack/paymentSuccess/paymentSuccess',
						success: (res) => {
							// 发布支付成功事件
							uni.$emit('paymentSuccess', {
								orderId: this.orderId
							})
						}
					})
				}, 1500)
			},

			// 支付失败（或5s内未查到支付信息）
			payFailed() {
				uni.showToast({
					title: '未查到支付信息...',
					icon: 'error'
				})
			},
			//查看退款进度
			afterSaleDetail(){
				uni.navigateTo({
					url: `/orderPack/aftermarket/refundProgress?id=${this.detailInfo.refundOrderId}`,
				})
			},
			// 跳转发票详情页
			toInvoiceDetails() {
			  uni.navigateTo({
			    url: '/minePack/function/invoice/invoiceDetails',
			    success: (res) => {
			      res.eventChannel.emit('invoiceDetails',{invoiceId:this.detailInfo.invoiceId,orderId: this.detailInfo.id})
			    }
			  })
			},
		},
		onLoad() {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('detailInfo', this.getDetailInfo)
			
		},
		// 分享到聊天
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: '卡友之家 换胎服务',
					desc: '请主动告知门店您购买的服务项目后验码使用!',
					path: `/pages/webview/webview?type=shareNo&orderNo=${this.currentOrder.orderNo}`,
					imageUrl: this.currentOrder.terminalInfo.photo1 ? this.currentOrder.terminalInfo.photo1 :
						'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'
				}
			}
			return {
				title: '阿特拉斯核销码分享',
				path: '/pages/index',
				imageUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'
			}
		},

		onShow() {
			const {
				referrerInfo
			} = this.showInfo
			if (referrerInfo.appId === 'wxc3e4d1682da3053c') {
				// 从拉卡拉返回
				// 非常重要！清除重返小程序的信息
				this.setShowInfo({})
				uni.showLoading({
					title: '查询支付结果中...',
					mask: true
				})
				setTimeout(async () => {
					const status = await this.getPayStatus()
					if (status === 4) {
						this.paySuccess()
					} else {
						this.payFailed()
					}
				}, 5000)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.img {
			width: 100%;
			height: 100%;
		}

		.mr {
			margin-right: 20rpx;
		}

		.ml {
			margin-left: 20rpx;
		}

		.fe {
			justify-content: flex-end;
		}

		.hr {
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		}

		.list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 24rpx;
			font-size: 12px;

			.label-name {
				width: 150rpx;
				font-size: 12px;
				font-weight: 400;
				margin-right: 48rpx;
				color: rgba(0, 0, 0, 0.45)
			}

			.content {
				flex: 1;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
				display: flex;
				align-items: center;
			}
		}

		.between {
			justify-content: space-between;
		}


		.detail-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 350rpx;
			background: #EE3B3B;
			z-index: 0;
		}

		.detail-content {
			position: relative;
			z-index: 1;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;

			.detail-status-wrapper {
				height: 250rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.kefu {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}

				.status {
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 62rpx;
						height: 62rpx;
						margin-right: 20rpx;
					}

					.status-name {
						color: #fff;
						font-size: 22px;
						font-weight: 400;
					}
				}

				.warning {
					color: #fff;
					font-size: 16px;
					margin-top: 40rpx;
				}
			}

			.detail-tip {
				padding: 36rpx 32rpx;
				background: #fff;
				border-radius: 12rpx;
				display: flex;

				.tip-icon {
					width: 44rpx;
					height: 34rpx;
					margin-right: 20rpx;
				}
				.tip-icon-dingwei {
					width: 44rpx;
					height: 44rpx;
				}

				.tip-title {
					flex: 1;
					font-size: 14px;

					.title {
						color: rgba(0, 0, 0, 0.85);
						font-weight: 400;
					}

					.date {
						margin-top: 28rpx;
						font-size: 13px;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.65);
					}

					.code-img {
						width: 400rpx;
						height: 400rpx;
					}

					.qr {
						position: relative;
						margin-bottom: 10rpx;
						height: 400rpx;
						text-align: center;
					}

					.code {
						font-weight: bold;
						text-align: center;
					}

					.use-date {
						font-size: 12px;
						margin-top: 20rpx;
						text-align: center;
						color: rgba(0, 0, 0, 0.65);
					}

					.tip {
						margin-top: 40rpx;
						font-size: 12px;
						text-align: center;
						color: rgba(0, 0, 0, 0.65);
					}
				}
			}

			.goods-info {
				background: #fff;
				border-radius: 12rpx;
				margin-top: 20rpx;

				.store {
					padding: 32rpx;
					font-size: 14px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

					.store-name {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.name {
							max-width: calc(100% - 20rpx);
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.goods-list {
					padding: 16rpx 32rpx;

					.goods-item {
						display: flex;
						margin-bottom: 20rpx;

						.goods-img {
							width: 160rpx;
							height: 160rpx;
						}

						.goods-info {
							flex: 1;
							margin-left: 20rpx;
							width: calc(100% - 180rpx);
							border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

							.goods-name {
								font-size: 15px;
								font-weight: 500;
								color: rgba(0, 0, 0, 0.85);
								word-wrap: break-all;
								overflow: hidden;
								line-break: anywhere;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 24rpx;
								margin-bottom: 20rpx;

								.price {
									font-size: 17px;
									font-weight: 400;
									color: #EE3B3B;
								}

								.num {
									font-size: 14px;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85)
								}
							}

							.action-btn {
								height: auto;
								overflow: hidden;
								padding-bottom: 20rpx;

								/deep/ .u-button {
									width: auto;
									margin-left: 20rpx;
									float: right;
								}
							}
						}
					}
				}

				.store-detail {
					padding: 0 32rpx;
					padding-bottom: 20rpx;

					.adress {
						font-size: 12px;
						color: rgba(0, 0, 0, 0.65)
					}

					.img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					.dhua {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
					}

					.dh {
						display: flex;
						align-items: center;
					}
				}
			}

			.order-info {
				background: #fff;
				border-radius: 12rpx;
				margin-top: 20rpx;
				padding: 32rpx;
				padding-bottom: 10rpx;

				/deep/ .u-button {
					width: 200rpx;
				}

				.img {
					width: 36rpx;
					height: 36rpx;
				}

				.acount {
					font-size: 18px;
					font-weight: 500;
					color: #EE3B3B;
				}

			}

			.oprate-btn {
				margin-top: 20rpx;
				padding: 32rpx;
				background: #fff;
				display: flex;
				justify-content: center;

				/deep/ .u-button {
					width: 100%;
					margin: 0 10rpx;
				}
			}
		}
	}
</style>
